<template>
	<view class="layout">
		<u-sticky bg-color="#f5f5f5" >
			<u-tabs name="title" :offset-top="offsetTop" :list="list" :is-scroll="false" inactive-color="#333333"
				active-color="#F9554C" bold :current="current" @change="tabChange" class="menu-list"></u-tabs>
		</u-sticky>
		<!-- 商品 -->
		<view class="goods-list" v-if="current == 0">
			<view @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay"
				:key="item_index">
				<view class="goods-img">
					<u-image :src="item.img" mode="aspectFit" width="100%" height="350rpx">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="goods-desc">
					<view class="goods-title">
						{{ item.title }}
					</view>
					<view class="goods-bottom">
						<view class="goods-price">
							¥<span>{{ item.price | formatPrice }} </span>
							<span class="monthly-sales">月销{{item.quantity}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 课程 -->
		<view class="goods-list" v-else>
			<view @click="handleCourse(item)" class="goods-item" v-for="(item, item_index) in dataList"
				:key="item_index">
				<view class="goods-img">
					<view class="course-mask"></view>
					<u-image :src="item.coverPath" mode="widthFit" width="100%" height="240rpx">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="course-author">
						<u-image :src="item.expertFace" mode="widthFit" shape="circle" width="60rpx" height="60rpx">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<span>{{item.expertName}}</span>
					</view>
				</view>
				<view class="goods-desc">
					<view class="course-title">
						{{ item.seriesName }}
					</view>
					<view class="goods-bottom">
						<view class="course-price">
							<span v-if="item.isCharge == '0'" style="color: green;">
								免费
							</span>
							<span v-if="item.isCharge == '1' && item.payStatus== 'PAID'" style="color:orange">
								已购买
							</span>
							<span v-if="item.isCharge == '1' && item.payStatus== 'UNPAID'">
								¥<span style="font-size: 42rpx;">{{ item.price | formatPrice }} </span>
							</span>
							<span class="monthly-sales">{{item.seriesWatchCount || 0}}人看过</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 模态框  -->
		<authenModal v-show="isShow" @close="closeBtn"  @confirm="confirmHandle" :content="content"></authenModal>
	</view>
</template>
<script>
	import authenModal from "@/components/modal/authen-modal.vue";
	import { API } from '@/config/myApi.js';
	export default {
		title: "商品分类以及商品",
		data() {
			return {
				offsetTop:0,//吸顶高度
				selected: {
					index: 0,
					val: "",
				},
				current: 0,
				list: [],
				dataList: [],
				params: {
					page: 1,
					rows: 100,
				},
				// 模态框
				isShow: false,
				content: "请先完成实名认证才可使用",
			};
		}, 
		props: ["res"],
		watch: {
			res: {
				handler(val) {
					// 监听父级的值 如果有值将值赋给selected
					if (val) {
						let temp = val.list[0].titleWay;
						this.list = temp.slice(0, 2);
						this.getCourseList();
						// this.selected.val = this.res.list[0].listWay[0].type;
					}
				},
				immediate: true,
			},
		},
		components:{ authenModal },
		mounted() {
			this.getUserInfo();
			uni.$on("toBack",(val)=>{
				console.log("回到",val);
				if (val) this.getUserInfo();
			})
		},
		filters:{
			// 格式化就挨个  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined") {
					return val;
				} else {
					// val.toFixed(2).split(".");
				}
				return val;
			},
		},
		methods: {
			//切换tabs
			tabChange(index) {
				this.current = index;
			},
			getUserInfo() {
				API.getMember().then(res=> {
					console.log('进入GOODS',res)
					this.info = res.result;
				})
			},
			// 是否认证
			isAuthen(callback) {
				if (this.info.realAuthentication) { // 是否认证
					this.isShow = false;
					callback()
					return
				} else {
					this.isShow = true;
				}
			},
			// 关闭模态框
			closeBtn() {
				this.isShow = false
			},
			// 去认证
			confirmHandle() {
				this.isShow = false;
				uni.navigateTo({
					url: "/pages/passport/authen",
				})
			},
			// 获取课程列表
			getCourseList() {
				API.getCourse(this.params).then(res => {
					if (res.code == 200) {
						this.total = Number(res.result.total)
						this.dataList = this.dataList.concat(res.result.rows) ;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 课程详情
			handleCourse(item) {
				this.isAuthen(()=>{
						let obj = {
							id: item.id,
							payStatus: item.payStatus
						};
						uni.navigateTo({
							url: '/pages/course/courseDetail?val=' + JSON.stringify(obj)
						})
				})
			},
			// 商品详情
			handleClick(item) {
				this.isAuthen(()=>{
					uni.navigateTo({
						url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
					});
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	$w_94: 94%;
	$main-color:#EE434E;
	$main-bg:#f5f5f5;
.menu-list{
	padding-bottom: 10rpx;
}
	::v-deep.u-badge--bg--error {
		opacity: 0;
		background-color: transparent;
	}

	.layout {
		padding: 8px 0;
		background: $main-bg;
	}

	// 吸顶的样式
	::v-deep.u-sticky {
		top: 0 !important;

		.u-tabs {
			background: $main-bg !important;
		}
	}

	.goods-cell-title {
		background: $main-bg;
		padding: 10px;
		transition: 0.35s;
		display: flex;
		cursor: pointer;

		>.goods-item-title {
			flex: 1;
			text-align: center;

			>h4 {
				font-size: 32rpx;
			}

			>view {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.goods-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.goods-item {
		width: 50%;
		margin-bottom: 10px;
		border-radius: 0.4em;
		overflow: hidden;
	}

	.goods-img {
		position: relative;
		margin: 0 auto;
		// width: 158px;
		width: $w_94;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		.course-author {
			position: absolute;
			z-index: 3;
			top: 16rpx;
			left: 16rpx;
			right: 0;
			display: flex;
			>span {
				color: #fff;
				margin: auto 10rpx;
			}
		}
		.course-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
		>img {
			width: 100%;
			height: 100%;
		}
	}

	.goods-desc {
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		width: $w_94;
		background: #fff;
		padding: 8rpx 0 8rpx 20rpx;
		margin: 0 auto;
		box-sizing: border-box;


		>.goods-title {
			display: -webkit-box;
			margin: 20rpx 0;
			height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			// line-height: 70rpx;
			color: #151515;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		>.course-title {
			margin: 20rpx 0;
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #151515;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		>.goods-bottom {
			display: flex;
			font-weight: bold;
			
			>.course-price {
				width: 100%;
				display: flex;
				justify-content: space-between;
				>span:first-child {
					color: red;
				}
				.monthly-sales {
					margin: auto 12rpx auto auto;
					font-size: 18rpx;
					font-weight: 500;
					color: #A6A6A6;
				}
			}

			>.goods-price {
				line-height: 2;
				color: $main-color;

				>span {
					font-size: 42rpx;
				}

				.monthly-sales {
					margin-left: 12rpx;
					font-size: 18rpx;
					font-weight: 500;
					color: #A6A6A6;
				}
			}
		}
	}
</style>
